<template>
	<view class="page pd-30">
		<comHead :datas="datasObj"></comHead>
		<view class="card2 pd-20 mt-20" v-if="files.length > 0">
			<view class="ft1">视频（{{ files.length }}）</view>
			<view class="imgGroup flex-start" style="width: 680rpx;">
				<view class="group-img mt-20" v-for="(item, index) in files" :key="index" @click="openVideoPopup(item)">
					<image class="play-icon" mode="widthFix"
						src="https://cdn.oss.bon-top.cn/static_bc/images/play-icon.png"></image>
					<image class="wh-100" mode="aspectFill"
						:src="item + '?x-oss-process=video/snapshot,t_1000,f_jpg,m_fast'"></image>
				</view>
			</view>
		</view>
		<view class="card2 pd-20 mt-20" v-if="images.length > 0">
			<view class="ft1">图片（{{ images.length }}）</view>
			<view class="imgGroup flex-start" style="width: 680rpx;">
				<view class="group-img mt-20" v-for="(item, index) in images" :key="index"
					@click="handlePreview(index, images)">
					<image class="wh-100" mode="aspectFill" :src="item"></image>
				</view>
			</view>
		</view>
		<view style="height: 68rpx;"></view>
	</view>
	<!-- <up-popup :show="showV" mode="center" @open="openV">
		<view class="video-wrapper" @click="closeV">
			<video :src="currentVideoUrl" object-fit="contain" :style="'width:100%;height:70vh;'" controls></video>
		</view>
	</up-popup> -->
	<up-popup :show="showV" mode="center" @open="openV">
		<view class="video-wrapper">
			<view class="close_img" :style="{ top: navHeight + 'px' }">
				<image class="popup-close" @click="closeV"
					src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png">
				</image>
			</view>

			<video :src="currentVideoUrl" object-fit="contain" :style="'width:100%;height:70vh;'" controls></video>
		</view>
	</up-popup>
</template>

<script lang="js" setup>
import {
	onLoad
} from '@dcloudio/uni-app'
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '老师视频&图片',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
})
const { proxy } = getCurrentInstance();
const files = ref([])
const images = ref([])
onLoad((options) => {
	const eventChannel = proxy.getOpenerEventChannel();
	// 接收数据
	eventChannel.on('toDetail', (data) => {
		files.value = data.files
		images.value = data.images
	});
})

const handlePreview = (index, imgList = []) => {
	console.log('imgList', imgList)
	uni.previewImage({
		current: index,
		urls: imgList
	});
}

const currentVideoUrl = ref('')
const isPlaying = ref(false)
const showV = ref(false)
const closeV = () => {
	showV.value = false
}
const openV = () => {
	showV.value = true;
}

const openVideoPopup = (url) => {
	currentVideoUrl.value = url;
	showV.value = true;
}
const onPopupClose = () => {
	showV.value = false;
	currentVideoUrl.value = '';
}
</script>

<style lang="scss" scoped>
.card {
	width: 690rpx;
	//height: 658rpx;
	background: #F8F8F8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.vedio {
		display: flex;
		flex-wrap: wrap;

		.vedioItem {
			width: 314rpx;
			height: 614rpx;

			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin-left: 6rpx;
			margin-bottom: 16rpx;
			position: relative;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}

			.play {
				position: absolute;
				top: 297rpx;
				left: 147rpx;
				z-index: 3;
			}

			.card {
				width: 294rpx;
				height: 82rpx;
				background: #ffffff;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				position: absolute;
				bottom: 10rpx;
				left: 10rpx;
				z-index: 10;

				.huiyuan {
					width: 22rpx;
					height: 20rpx;
					position: absolute;
					bottom: 10rpx;
					left: 44rpx;
					z-index: 12;
				}
			}
		}
	}
}

.card2 {
	width: 690rpx;
	// height: 492rpx;
	background: #F8F8F8;
	border-radius: 40rpx;

	.group-img {
		width: 148rpx;
		height: 186rpx;
		border-radius: 40rpx;
		overflow: hidden;
		position: relative;
		flex-shrink: 0;
		margin-right: 20rpx;

		.play-icon {
			position: absolute;
			top: 12rpx;
			left: 12rpx;
			width: 36rpx;
			height: 36rpx;
			z-index: 1;
		}

		.img-count {
			display: none;
		}
	}
}

.video-wrapper {
	width: 100vw;
	height: 100vh;
	background: #000;
	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;
	position: relative;

	.video_box {
		// flex: 1;
		background: red;
	}

	.close_img {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		position: absolute;
		top: 90rpx;
		left: 20rpx;

		.popup-close {
			width: 46rpx;
			height: 46rpx;
		}
	}
}
</style>